<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    <h:head>
        <title>Sales And Operation Plan</title>
    </h:head>
    <f:view beforePhase="#{UserDisplayManagedBean.initView}">
        <f:view beforePhase="#{SalesAndOperationManagedBean.initView}">

            <h:form prependId="false">
                <p:growl id="msgs" showDetail="true"/>
                <!-- IDLE DIALOG for -->
                <p:confirmDialog message="You have been idle for 5 minutes. Do you want to continue?"  
                                 showEffect="bounce" hideEffect="explode"  
                                 header="Warning message" severity="alert" widgetVar="confirmation">  
                    <p:commandButton value="Yes" onclick="confirmation.hide()" type="button" /> 
                    <p:commandButton value="No" update="panel" oncomplete="confirmation.hide()"  
                                     actionListener="#{UserManagedBean.doLogout}" /> 
                </p:confirmDialog>

                <p:idleMonitor timeout="300000" onidle="confirmation.show()" />  
                <!--END OF IDLE DIALOG-->
                <h:body>
                    <div id="header">
                        <h:graphicImage value="/image/newHeader.jpg"/>
                    </div>

                    <div id="content">
                        <table>
                            <tr>
                                <td style="vertical-align:top">
                                    <p:toolbar style="background-color:darkred;font-size:90%;height:35px;width:220px"> 
                                        <p:toolbarGroup align="right">
                                            <p:button title="Home" image="ui-icon-home" outcome="ManufacturingDeptWorkspace"/>
                                            <p:button title="Notes" image="ui-icon-note"/>
                                            <p:button title="Mail" image="ui-icon-mail-closed"/>
                                            <p:button title="Edit Preferences" image="ui-icon-gear"/>
                                            <p:button title="Help" image="ui-icon-help"/>
                                            <p:commandButton immediate="true" type="submit" image="ui-icon-close" actionListener="#{UserManagedBean.doLogout}"/> 
                                        </p:toolbarGroup>
                                    </p:toolbar>

                                    <p:menu id="menu" style=" width: 205px;height: 510px;font-family: Verdana;border-style: double;font-size: 80%">  
                                        <p:submenu label="Manufacturing Menu">  
                                            <p:menuitem value="Manufacturing Dept Home" url="http://localhost:8080/MerlionERP-war/MRP/ManufacturingDeptWorkspace.xhtml" ajax="false" icon="ui-icon ui-icon-home"/>  
                                        </p:submenu>
                                        <p:submenu label="Production Planning">
                                            <p:menuitem value="View Sales Record" url="http://localhost:8080/MerlionERP-war/MRP/SalesRecord.xhtml" ajax="false" icon="ui-icon ui-icon-search"/>  
                                            <p:menuitem value="View Sales Forecast" url="http://localhost:8080/MerlionERP-war/MRP/SalesForecast.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                            <p:menuitem value="View Sales and Operation Plan" url="http://localhost:8080/MerlionERP-war/MRP/SalesAndOperationPlan.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                        <p:submenu label="Master Production Schedule">
                                            <p:menuitem value="View MPS Weekly" url="http://localhost:8080/MerlionERP-war/MRP/MasterProductionScheduleWeekly.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                            <p:menuitem value="View MPS Daily" url="http://localhost:8080/MerlionERP-war/MRP/MasterProductionScheduleDaily.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                            <p:menuitem value="Commit MPS" url="http://localhost:8080/MerlionERP-war/MRP/CommitMasterProductionSchedule.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                        <p:submenu label="Material Planning">
                                            <p:menuitem value="View Requirement Planning" url="http://localhost:8080/MerlionERP-war/MRP/MaterialRequirementPlanning.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                        <p:submenu label="Bill of Materials">
                                            <p:menuitem value="View Bill of Materials" url="http://localhost:8080/MerlionERP-war/MRP/BillOfMaterials.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                        <p:submenu label="Production Execution">
                                            <p:menuitem value="Production Execution" url="http://localhost:8080/MerlionERP-war/MRP/ProductionExecution.xhtml" ajax="false" icon="ui-icon ui-icon-search" />
                                        </p:submenu>
                                    </p:menu>

                                    <p:calendar mode="inline" style="font-size:11px;font-family:Tahoma"/>
                                </td>

                                <td style=" vertical-align: top">
                                    <h:graphicImage value="wrench.png" style="width:35px;height:35px" />
                                    <h:outputText value="         "/>
                                    <h:outputText value="Sales And Operation Plan" style="font-family:Tahoma;font-size:20px;font-weight:bolder"/>
                                    <p:spacer width="100" height="10"/>


                                    <p:panel id="panel" style=" font-family: Tahoma;width:1105px">
                                        <h:panelGrid columns="3">
                                            <h:outputText value="Period"/>
                                            <h:selectOneMenu required="true" requiredMessage="Period is required" id="pr" style="width:218px"  value="#{SalesAndOperationManagedBean.period}">
                                                <f:selectItem itemValue="" itemLabel="Select Period"/>
                                                <f:selectItem itemValue="11" itemLabel="Q1(January-March)"/>
                                                <f:selectItem itemValue="12" itemLabel="Q2(April-June)"/>
                                                <f:selectItem itemValue="13" itemLabel="Q3(July-September)"/>
                                                <f:selectItem itemValue="14" itemLabel="Q4(October-December)"/>
                                            </h:selectOneMenu>
                                            <p:message for="pr" />

                                            <h:outputText value="Year"/>
                                            <p:inputText required="true" id="y" requiredMessage="Year is required" style="width:50px" maxlength="4" value="#{SalesAndOperationManagedBean.yearInt}"  
                                                         /> 
                                            <p:message for="y"/>

                                            <p:commandButton ajax="true" onclick="breakdownDialog.show()" type="push" image="ui-icon ui-icon-plusthick" value="Generate" />

                                        </h:panelGrid>

                                        <p:spacer height="50px"/>

                                        <p:dataTable id="forecastMonths" var="sop" value="#{SalesAndOperationManagedBean.selectedSOP}"
                                                     paginator="true" rows="5"
                                                     paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                                     rowsPerPageTemplate="5,10,15"  style="font-size:70%;width:1085px;"
                                                     emptyMessage="No data found with given criteria" widgetVar="sopTable"
                                                     rowEditListener="#{SalesAndOperationManagedBean.onEditRow}"
                                                     selection="#{SalesAndOperationManagedBean.selectedSOPs}">
                                            <f:facet name="header">
                                                <H2>SALES AND OPERATION PLAN</H2>

                                                <p:outputPanel style="text-align:right"  >
                                                    <h:outputText value="Search all fields:" style="margin-left:640px" />  
                                                    <p:inputText id="globalFilter" onkeyup="sopTable.filter()" style="right:-100px;width:150px" />  
                                                </p:outputPanel>
                                            </f:facet>

                                            <p:column style="width: 16px" selectionMode="multiple" />  

                                            <p:column style="width: 100px" sortBy="#{sop.monthInt}" filterBy="#{sop.monthInt}" filterMatchMode="contains">
                                                <f:facet name="header">
                                                    <h:outputText value="Month"  />
                                                </f:facet>
                                                <h:outputText value="#{sop.monthInt}"/>
                                            </p:column>

                                            <p:column>
                                                <f:facet name="header">
                                                    <h:outputText value="Sales Forecast" />
                                                </f:facet>
                                                <h:outputText value="#{sop.salesForecast}"/>
                                            </p:column>

                                            <p:column headerText="Production Plan">
                                                <p:cellEditor>
                                                    <f:facet name="output">
                                                        <h:outputText id="pop" value="#{sop.productionPlan}" />
                                                    </f:facet>
                                                    <f:facet name="input">
                                                        <p:inputText value="#{sop.productionPlan}">
                                                            <p:ajax event="rowEdit" update="panel forecastMonths util pop "/>
                                                        </p:inputText>
                                                    </f:facet>
                                                </p:cellEditor>
                                            </p:column>

                                            <p:column>
                                                <f:facet name="header">
                                                    <h:outputText value="Working Days" />
                                                </f:facet>
                                                <h:outputText value="#{sop.nWorkingDays}"/>
                                            </p:column>


                                            <p:column>
                                                <f:facet name="header">
                                                    <h:outputText value="Capacity" />
                                                </f:facet>
                                                <h:outputText value="#{sop.capacity}"/>
                                            </p:column>

                                            <p:column>
                                                <f:facet name="header">
                                                    <h:outputText value="Utilization" />
                                                </f:facet>
                                                <h:outputText id="util" value="#{sop.utilization}"/>
                                            </p:column>

                                            <p:column headerText="Status" style="width: 100px">
                                                   <h:outputText value="Finalized" rendered="#{sop.finalized}"/>
                                                    <h:outputText value="Not Finalized" rendered="#{!sop.finalized}"/>
                                            </p:column>


                                            <!--EDIT-->   
                                            <p:column style=" border-left-color:transparent;border-right-color:transparent">
                                                <f:facet name="header">
                                                    <h:outputText value="Edit"/>
                                                </f:facet>
                                                <p:rowEditor  />
                                            </p:column>

                                            <!--VIEW DETAILS-->
                                            <p:column style="width:20px; border-left-color:transparent;border-right-color:transparent">
                                                <f:facet name="header">
                                                    <h:outputText value="View"/>
                                                </f:facet>
                                                <p:rowToggler />
                                            </p:column>

                                            <p:rowExpansion>  
                                                <h:outputText value="PRODUCT DETAILS"/>

                                                <p:dataTable id="expansion" var="products" value="#{sop.breakdowns}" >
                                                    <p:column>
                                                        <f:facet name="header">
                                                            <h:outputText value="Product ID"/>
                                                        </f:facet>
                                                        <h:outputText value="#{products.id}" />
                                                    </p:column>
                                                    <p:column>
                                                        <f:facet name="header">
                                                            <h:outputText value="Product Name"/>
                                                        </f:facet>
                                                        <h:outputText value="#{products.name}" />
                                                    </p:column>
                                                    <p:column>
                                                        <f:facet name="header">
                                                            <h:outputText value="Product Quantity"/>
                                                        </f:facet>
                                                        <h:outputText value="#{products.quantity}" />
                                                    </p:column>
                                                    <p:column>
                                                        <f:facet name="header">
                                                            <h:outputText value="Ratio"/>
                                                        </f:facet>
                                                        <h:outputText value="#{products.ratio}" />
                                                    </p:column>
                                                </p:dataTable>
                                            </p:rowExpansion> 
                                        </p:dataTable>

                                        <!-- DIALOG FOR BREAKDOWN -->
                                        <p:dialog header="MATERIALS DETAILS" widgetVar="breakdownDialog" resizable="false"  
                                                  width="800" showEffect="explode" hideEffect="explode">  
                                            <center> 
                                                <h:panelGrid border="1" id="display1" columns="2" cellpadding="4">  
                                                    <h:outputText value="Product ID - Name" />  
                                                    <h:outputText value="Ratio (%)" />  

                                                    <h:outputText value="#{SalesAndOperationManagedBean.id1}-#{SalesAndOperationManagedBean.name1}" />
                                                    <p:inputText value="#{SalesAndOperationManagedBean.ratio1}"/>

                                                    <h:outputText value="#{SalesAndOperationManagedBean.id2}-#{SalesAndOperationManagedBean.name2}" />
                                                    <p:inputText value="#{SalesAndOperationManagedBean.ratio2}"/>

                                                    <h:outputText value="#{SalesAndOperationManagedBean.id3}-#{SalesAndOperationManagedBean.name3}" />
                                                    <p:inputText value="#{SalesAndOperationManagedBean.ratio3}"/>

                                                    <h:outputText value="#{SalesAndOperationManagedBean.id4}-#{SalesAndOperationManagedBean.name4}" />
                                                    <p:inputText value="#{SalesAndOperationManagedBean.ratio4}"/>


                                                </h:panelGrid>

                                                <center>
                                                    <p:commandButton value="Generate" ajax="true" update="panel display1 forecastMonths" immediate="false" actionListener="#{SalesAndOperationManagedBean.doGenerate}"   
                                                                     image="ui-icon ui-icon-plusthick" />  
                                                    <p:commandButton value="Cancel" onclick="breakdownDialog.hide()" type="button" image="ui-icon ui-icon-close"/>  

                                                </center> 
                                            </center>
                                        </p:dialog> 

                                        <p:commandButton immediate="false" update="msgs panel forecastMonths" ajax="true"  actionListener="#{SalesAndOperationManagedBean.doUpdateAndFinalize}" type="push" image="ui-icon ui-icon-document" value="Update And Finalize" />

                                    </p:panel>
                                </td>
                            </tr>
                        </table>

                    </div>

                    <div id="footer">
                        <h:graphicImage value="/image/merlionfooter.jpg"/>
                    </div>
                </h:body>
            </h:form>
        </f:view>
    </f:view>
</html>

